'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ListView,
    Image,
    TouchableOpacity,
} from 'react-native';
let Dimensions = require('Dimensions');
let totalWidth = Dimensions.get('window').width;

let totalHeight = Dimensions.get('window').height;
import Global from '../Commom/TestData';
export default class WeiShenMe extends Component {
    constructor(props) {
        super(props);
        var dsCity = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dsArea = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        var dsTown = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            isCity: false,
            isArea: false,
            dataSourceCity: dsCity,
            allCity: [],
            dataSourceArea: dsArea,
            allArea: [],
            dataSourceTown: dsTown,
            allTown: [],
            cursorSelectCity: 0,
            cursorSelectArea: 0,
            city: '珠海市',
            area: '金湾区',
            town: '斗门镇',
            isShow: false,
        };
        this.showView = this.showView.bind(this);
    }

    componentDidMount() {
        var allds = this.props.AllData;
        var allcategory = [];

        for (let i = 0; i < allds.length; i++) {
            if (i == 0) {
                allcategory.push({name: allds[i].city, isCity: true});
            }
            else {
                allcategory.push({name: allds[i].city, isCity: false});
            }
        }
        var allAreaTown = [];
        for (let i = 0; i < allds[0].area.length; i++) {
            if (i == 0) {
                allAreaTown.push({name: allds[0].area, isArea: true});
            } else {
                allAreaTown.push({name: allds[0].area, isArea: false});
            }
        }
        this.setState({
            city: allcategory[0].name,
            area: allAreaTown[0].name[0].area,
            town: allAreaTown[0].name[0].town[0].town,
            allCity: allcategory,
            dataSourceCity: this.state.dataSourceCity.cloneWithRows(allcategory),
            allArea: allAreaTown,
            dataSourceArea: this.state.dataSourceArea.cloneWithRows(allAreaTown),
            allTown: allAreaTown[0].name[0].town,
            dataSourceTown: this.state.dataSourceTown.cloneWithRows(allAreaTown[0].name[0].town),
        });
    }

    renderCityRow(rowData, sectionID, rowID) {
        console.log(rowData);
        return (
            <TouchableOpacity
                onPress={()=>this.selectCity(rowID)}>
                <View
                    style={{height:40,width:totalWidth/3,justifyContent:'center',alignItems:'center',backgroundColor:rowData.isCity?'#F2F3F5':'white',borderBottomWidth:1,borderRightWidth:1,borderColor:'#F2F3F5'}}>
                    <Text style={{color:'gray'}}>{rowData.name}</Text>
                    <Image style={{position:'absolute',top:13,right:8,resizeMode:'contain',width:14,height:14}}
                           source={require('../../Image/up_icon.png')}></Image>
                </View>
            </TouchableOpacity>
        );
    }

    selectCity(rowID) {
        let newArray = this.state.allCity.concat();
        newArray[this.state.cursorSelectCity] = {
            ...this.state.allCity[this.state.cursorSelectCity],
            isCity: false,
        }
        newArray[rowID] = {
            ...this.state.allCity[rowID],
            isCity: true,
        }
        var allds = Global.AllData;
        var allAreaTown = [];
        for (let i = 0; i < allds[rowID].area.length; i++) {
            if (i == 0) {
                allAreaTown.push({name: allds[rowID].area, isArea: true});
            } else {
                allAreaTown.push({name: allds[rowID].area, isArea: false});
            }
        }
        this.setState({
            city: this.state.allCity[rowID].name,
            area: allAreaTown[0].name[0].area,
            town: allAreaTown[0].name[0].town[0].town,
            cursorSelectCity: rowID,
            allCity: newArray,
            cursorSelectArea: 0,
            dataSourceCity: this.state.dataSourceCity.cloneWithRows(newArray),
            allArea: allAreaTown,
            dataSourceArea: this.state.dataSourceArea.cloneWithRows(allAreaTown),
            allTown: allAreaTown[0].name[0].town,
            dataSourceTown: this.state.dataSourceTown.cloneWithRows(allAreaTown[0].name[0].town),

        });
    }

    selectArea(rowID) {
        let newArrayArea = this.state.allArea.concat();
        newArrayArea[this.state.cursorSelectArea] = {
            ...this.state.allArea[this.state.cursorSelectArea],
            isArea: false,
        }
        newArrayArea[rowID] = {
            ...this.state.allArea[rowID],
            isArea: true,
        }
        var allds = this.state.allArea;
        this.setState({
            area: this.state.allArea[rowID].name[rowID].area,
            town: this.state.allArea[rowID].name[rowID].town[0].town,

            cursorSelectArea: rowID,
            allArea: newArrayArea,
            dataSourceArea: this.state.dataSourceArea.cloneWithRows(newArrayArea),

            allTown: allds[0].name[rowID].town,
            dataSourceTown: this.state.dataSourceTown.cloneWithRows(allds[0].name[rowID].town),
        });
    }

    selectTown(rowID) {
        this.setState({
            town: this.state.allTown[rowID].town,
            isShow: false,
        });
    }

    renderAreaRow(rowData, sectionID, rowID) {
        return (
            <TouchableOpacity
                onPress={()=>this.selectArea(rowID)}>
                <View
                    style={{height:40,justifyContent:'center',alignItems:'center',backgroundColor:rowData.isArea?'#F2F3F5':'white',borderBottomWidth:1,borderRightWidth:1,borderColor:'#F2F3F5'}}>
                    <Text style={{color:'gray'}}>{rowData.name[rowID].area}</Text>
                    <Image style={{position:'absolute',top:13,right:8,resizeMode:'contain',width:14,height:14}}
                           source={require('../../Image/up_icon.png')}></Image>
                </View>
            </TouchableOpacity>
        );
    }

    renderTownRow(rowData, sectionID, rowID) {
        return (
            <TouchableOpacity
                onPress={()=>this.selectTown(rowID)}>
                <View
                    style={{height:40,justifyContent:'center',alignItems:'center',backgroundColor:'white',borderBottomWidth:1,borderRightWidth:1,borderColor:'#F2F3F5'}}>
                    <Text>{rowData.town}</Text>
                </View>
            </TouchableOpacity>
        );
    }

    show() {

        this.setState({
            isShow: true,
        });
    }

    showView() {
        if (this.state.isShow) {
            return (
                    <View style={{flex:1,backgroundColor:'white',flexDirection:'row'}}>
                        <View style={{width:totalWidth/3}}>
                            <ListView
                                enableEmptySections={true}
                                onEndReachedThreshold={50}
                                dataSource={this.state.dataSourceCity}
                                renderRow={this.renderCityRow.bind(this)}/>
                        </View>
                        <View style={{width:totalWidth/3}}>
                            <ListView
                                enableEmptySections={true}
                                onEndReachedThreshold={50}
                                dataSource={this.state.dataSourceArea}
                                renderRow={this.renderAreaRow.bind(this)}/>
                        </View>
                        <View style={{width:totalWidth/3}}>
                            <ListView
                                enableEmptySections={true}
                                onEndReachedThreshold={50}
                                dataSource={this.state.dataSourceTown}
                                renderRow={this.renderTownRow.bind(this)}/>
                        </View>
                    </View>
            )
                ;
        } else {
            return (
                null
            );
        }

    }

    render() {
        return (
            <View style={{flex:1}}>
                <TouchableOpacity
                    onPress={()=>this.show()}>
                    <View
                        style={{width:totalWidth,height:45,flexDirection:'row',justifyContent:'center',alignItems:'center', backgroundColor: '#F3F2F5',borderBottomWidth:1,borderColor:'#999999'}}>
                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                            <Text>{this.state.city}</Text>
                        </View>
                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                            <Text>{this.state.area}</Text>
                        </View>
                        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                            <Text>{this.state.town}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
                {this.showView()}
            </View>

        );
    }

}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FAFAFA',
    },
});